<template>
  <div class="forget">
    <div class="img">
      <img src="../assets/logoko (2).png" alt="" />
    </div>
    <Myalert :message="msg" :color="alertColor" v-if="isAlertShow" @close-alert="closeAlertFn"></Myalert>
    <form action="">
      <div>
        <input v-model="pwd" type="password" placeholder="请输入密码" />
      </div>
      <div>
        <input  v-model="pwd2" type="password" placeholder="请确定密码" />
      </div>
      <div class="btn">
        <div class="have"><button @click="setPwd">设置密码</button></div>
        <div class="no">
          <a @click="jumpLogin">跳转登录</a>
          <a @click="jumpHome">首页</a>
        </div>
      </div>
    </form>
  </div>
</template>

<script>
import Myalert from '@/components/Myalert.vue'
export default {
  components:{
    Myalert
  },
  data() {
    return {
      pwd:'',
      pwd2:'',
      msg: "这是xxx弹窗",
      isAlertShow: false,
      alertColor: '#fff',
    }
  },
  methods: {
    setPwd(){
      if(this.pwd==this.pwd2){
        this.showAlertFn("设置成功", "#33fffe");
        setTimeout(() => {
              //  跳转
              this.$router.replace({ path: "/login" });
            }, 500);
      }else{
        this.showAlertFn("两次密码不一致", "#fb0201");
      }
    },
    jumpLogin(){
      this.$router.replace({path:'/login'}).catch(err=>{})
    },
    jumpHome(){
      this.$router.replace({path:'/'}).catch(err=>{})
    },
    // 关闭自定义弹窗
    closeAlertFn(value) {
      // 检查代码
      // console.log(value)
      this.isAlertShow = value;
    },
    // 显示自定义弹窗
    showAlertFn(message, color = "#000") {
      this.msg = message;
      this.isAlertShow = true;
      this.alertColor = color;
    }
  },
}
</script>

<style lang="less" scoped>
@import "../style/variable.less";

.forget {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d6ceec;
  .img {
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  form {
    width: 100%;
    height: 100%;
    margin-top: 100px;
    div {
      width: 80%;
      margin: 0 auto;
      input {
        width: 300px;
        height: 40px;
        padding: 0 15px;
        margin: 10px 0;
        font-family: logotext;
        border-radius: 5px;
      }
    }
    .btn {
      width: 300px;
      .have {
        width: 300px;
        margin-top: 30px;
        button {
          width: 300px;
          height: 40px;
          color: #baa6f2;
          font-weight: bolder;
          font-size: 18px;
          font-family: logotext;
          border-radius: 5px;
          &:focus {
            background-color: #baa6f2;
            color: #fff;
          }
        }
      }
      .no {
        display: flex;
        width: 300px;
        margin: 20px auto;
        justify-content: space-between;
        a {
          text-align: center;
          width: 120px;
          height: 30px;
          color: #baa6f2;
          font-weight: bolder;
          font-size: 12px;
          font-family: logotext;
          border-radius: 5px;
          &:focus {
            background-color: #e2dcf1;
            color: #fff;
          }
        }
      }
    }
  }
}
</style>